<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./js/vue.js"></script>
		<link rel="stylesheet" href="./css/index.css">
		<script src="js/jquery-3.5.1.js"></script>
	</head>
	<body>
		<div id="header">
			<div class="cont">
				<div class="topbar-nav">
					<a href="#" style="float: left;" id-name="" onclick="onClick(this)">首页</a>
					<div v-for="type in types" style="float: left;">
						<span class="sep">|</span>
						<a href="#" v-bind:id-name="type.type" onclick="onClick(this)">{{ type.type }}</a>
					</div>
				</div>
				<div class="topbar-cart" id="J_miniCartTrigger">
					<a href="#" id="J_miniCartBtn" class="iconfont">购物车<span class="iconfont">（0）</span></a>
					<div class="cart-menu" id="J_miniCartMenu">
						<div class="loading">购物车中还没有商品，赶紧选购吧！</div>

					</div>

				</div>
				<div class="topbar-info" id="J_userInfo">
					<a class="link" href="">登录</a>
					<span class="sep">|</span>
					<a href="">问答</a>
					<span class="sep">|</span>
					<a href="">联系我们 </a>
				</div>

			</div>
		</div>

		<!--  电影信息 -->
		<table id="example">
			<tbody>
				<tr v-for="(movie, index) in movies" v-if="index%8==0" class="movies">
					<th v-for="i in 8" v-if="movies[i - 1 + index] != null">
						<a class="item" target="_blank" v-bind:href="movies[i-1+index].url">
							<div class="cover-wp">
								<img v-bind:src="movies[i-1+index].cover" v-bind:alt="movies[i-1+index].name">
							</div>
							<p>
								{{ movies[i-1+index].name }}
								<strong>{{ movies[i-1+index].rating }}</strong>
							</p>
						</a>
					</th>
				</tr>
			</tbody>
		</table>

		<script type="text/javascript">
			// 类型填充
			type = [{
				type: "动画"
			}, {
				type: "成长"
			}, {
				type: "励志"
			}, {
				type: "科幻"
			}]
			// var type = new Vue({
			// 	el: ".topbar-nav",
			// 	data: {
			// 		types: type
			// 	}
			// })
			// 

			$.ajax({
				url: "http://localhost:8888/types",
				contentType: "application/x-www-form-urlencoded",
				type: "get",
				dataType: 'json',
				success: function(data) {
					type = data;
					console.log(data);
					var type = new Vue({
						el: ".topbar-nav",
						data: {
							types: type
						}
					});
				},
				error: function() {}

			});

			// 电影信息的获取
			var movies = [{
					"id": "10428501",
					"name": "新·福音战士剧场版：终",
					"cover": "https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2629054917.jpg",
					"url": "https://movie.douban.com/subject/10428501/",
					"type": "剧情/科幻/动画",
					"director": "庵野秀明/鹤卷和哉/中山胜一/前田真宏",
					"author": "庵野秀明",
					"actor": "绪方惠美/林原惠美/宫村优子/石田彰/坂本真绫/三石琴乃/山口由里子/立木文彦/清川元梦/关智一/岩永哲哉/岩男润子/长泽美树/子安武人/优希比吕/大塚明夫/泽城美雪/大原沙耶香/伊濑茉莉也/胜杏里/山寺宏一/内山昂辉/川田绅司/兴津和幸/下山吉光/星野充昭/佐藤蓝/泷泽罗子/堀越真己/八百屋杏/斋藤千和/小野冢贵志/仪武祐子/手冢弘道/塙爱美/中务贵幸/大南悠/丹羽正人/广濑小夜/中村源太/武藏真之介/新祐树/前田玲奈/村田知沙/井关花芽/虎岛贵明/神木隆之介",
					"datePublished": "2021-03-07T16:00:00.000+00:00",
					"description": "成为“第三次冲击”元凶的碇真嗣，变得像废人一样……真嗣还能振作起来吗？2012年《福音战士新剧场版：Q》之后，这部动画讲述了被封印的故事的后续。",
					"ratingCount": "60640",
					"rating": "9.2"
				},
				{
					"id": "10437779",
					"name": "新世界",
					"cover": "https://img1.doubanio.com/view/photo/s_ratio_poster/public/p1903379979.jpg",
					"url": "https://movie.douban.com/subject/10437779/",
					"type": "剧情/犯罪",
					"director": "朴勋政",
					"author": "朴勋政",
					"actor": "李政宰/崔岷植/黄政民/宋智孝/朴成雄/金秉玉/金胤成",
					"datePublished": "2013-02-20T16:00:00.000+00:00",
					"description": "金门集团会长、暴力组织在虎派大佬石东出遭遇车祸身亡，该事件在黑白两道引起不小震荡。为了遏制金门集团进一步向合法领域渗透并持续壮大，警方及时提出“新世界计划”，旨在干预金门集团继任大佬的选举。而围绕会长...",
					"ratingCount": "361079",
					"rating": "8.9"
				},
				{
					"id": "10440138",
					"name": "侏罗纪世界",
					"cover": "https://img2.doubanio.com/view/photo/s_ratio_poster/public/p2246217861.jpg",
					"url": "https://movie.douban.com/subject/10440138/",
					"type": "动作/科幻/冒险",
					"director": "科林·特莱沃若",
					"author": "里克·杰法/阿曼达·斯尔沃/德里克·康纳利/科林·特莱沃若/迈克尔·克莱顿",
					"actor": "克里斯·帕拉特/布莱丝·达拉斯·霍华德/文森特·多诺费奥/泰·辛普金斯/尼克·罗宾森/奥玛·希/黄荣亮/伊尔凡·可汗/朱迪·格雷尔/杰克·约翰逊",
					"datePublished": "2015-06-09T16:00:00.000+00:00",
					"description": "21世纪，曾经诞生过第一只恐龙的努布拉岛，在经历了一系列的惨剧之后迎来新的时代，如今这里经马斯拉尼之手建成了规模宏大的主题公园“侏罗纪世界”，数量繁多的远古生物每天都吸引数以万计的游客前来一饱眼福。为...",
					"ratingCount": "384000",
					"rating": "7.7"
				},
				{
					"id": "10463953",
					"name": "模仿游戏",
					"cover": "https://img2.doubanio.com/view/photo/s_ratio_poster/public/p2255040492.jpg",
					"url": "https://movie.douban.com/subject/10463953/",
					"type": "剧情/同性/传记/战争",
					"director": "莫滕·泰杜姆",
					"author": "格拉汉姆·摩尔/安德鲁·霍奇斯",
					"actor": "本尼迪克特·康伯巴奇/凯拉·奈特莉/马修·古迪/罗里·金尼尔/艾伦·里奇/马修·比尔德/查尔斯·丹斯/马克·斯特朗/詹姆斯·诺斯科特/汤姆·古德曼-希尔/史蒂芬·威丁顿/伊兰·古德曼/杰克·塔尔登/埃里克斯·劳瑟/杰克·巴农/塔彭丝·米德尔顿/安德鲁·哈维尔/维尔·博登/李·阿斯奎斯-柯/海莉·乔安妮·培根/安库塔·布雷班/格雷斯·卡尔德/理查德·坎贝尔/温斯顿·丘吉尔/克里斯·考林/汉娜·弗林/阿道夫·希特勒 Adolf Hitler/卢克·霍普/斯图尔特·马修斯/亚当·诺威尔/哈里·S·杜鲁门",
					"datePublished": "2014-11-13T16:00:00.000+00:00",
					"description": "二战期间，盟军苦于德国的秘密系统”英格玛“无法破译，政府召集了一批民间数学家、逻辑学家进行秘密破解工作，图灵（本尼迪克特·康伯巴奇 Benedict Cumberbatch 饰）就是其中之一。计划刚开...",
					"ratingCount": "583212",
					"rating": "8.7"
				},
				{
					"id": "10467774",
					"name": "孙子从美国来",
					"cover": "https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2157878128.jpg",
					"url": "https://movie.douban.com/subject/10467774/",
					"type": "剧情/家庭/儿童",
					"director": "曲江涛",
					"author": "曲江涛",
					"actor": "罗京民/丁佳明/刘天佐",
					"datePublished": "2012-02-01T16:00:00.000+00:00",
					"description": "老杨头（罗京民 饰）是陕西华县一名独居老艺人，家中珍藏着表演皮影戏的全套行当。一天，离家多年的儿子突然领回了洋女友和洋孙子布鲁克斯（丁佳明 饰）。观念受到冲击的老杨头还未回过神来，儿子和女友又因要远赴...",
					"ratingCount": "81990",
					"rating": "8.5"
				},
				{
					"id": "10484041",
					"name": "横道世之介",
					"cover": "https://img2.doubanio.com/view/photo/s_ratio_poster/public/p2021127692.jpg",
					"url": "https://movie.douban.com/subject/10484041/",
					"type": "剧情/爱情",
					"director": "冲田修一",
					"author": "冲田修一/前田司郎/吉田修一",
					"actor": "高良健吾/吉高由里子/池松壮亮/伊藤步/绫野刚/井浦新/国村隼/堀内敬子/古关安广/余贵美子/朝仓亚纪/柄本佑",
					"datePublished": "2013-02-22T16:00:00.000+00:00",
					"description": "在20世纪80年代末，出生在海港小镇的青年横道世之介（高良健吾 饰）一脸懵懂地出现在东京街头。正如他那个有些奇怪的名字一样，世之介仿佛与现代化大都会有着天然的差距，不过这个天生乐观且迂直的大男孩很快融...",
					"ratingCount": "139981",
					"rating": "8.8"
				},
				{
					"id": "10485647",
					"name": "X战警：逆转未来",
					"cover": "https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2181156848.jpg",
					"url": "https://movie.douban.com/subject/10485647/",
					"type": "剧情/动作/科幻/冒险",
					"director": "布莱恩·辛格",
					"author": "西蒙·金伯格/简·古德曼/马修·沃恩",
					"actor": "休·杰克曼/詹姆斯·麦卡沃伊/迈克尔·法斯宾德/詹妮弗·劳伦斯/哈莉·贝瑞/尼古拉斯·霍尔特/埃文·彼得斯/伊恩·麦克莱恩/帕特里克·斯图尔特/艾利奥特·佩吉/安娜·帕奎因/彼特·丁拉基/肖恩·阿什莫/卢卡斯·提尔/丹尼尔·库德摩尔/波波·斯图尔特/奥玛·希/范冰冰/阿丹·坎托/乔什·赫尔曼",
					"datePublished": "2014-05-22T16:00:00.000+00:00",
					"description": "故事的设定发生在当下，变种人族群遭到了前所未有的毁灭性打击，而这一切的根源是“魔形女”瑞文（詹妮弗·劳伦斯 Jennifer Lawrence 饰）在1973年刺杀了玻利瓦尔·特拉斯克（彼特·丁拉基 ...",
					"ratingCount": "425499",
					"rating": "8.2"
				},
				{
					"id": "10490568",
					"name": "蝴蝶梦",
					"cover": "https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2622573569.jpg",
					"url": "https://movie.douban.com/subject/10490568/",
					"type": "剧情/爱情/悬疑/惊悚",
					"director": "本·维特利 ",
					"author": "简·古德曼/乔·施雷普内尔/安娜·沃特豪斯/达芙妮·杜穆里埃",
					"actor": "莉莉·詹姆斯/艾米·汉莫/凯莉·霍威/克里斯汀·斯科特·托马斯/简·拉波特泰尔/安·唐德/马克·路易斯·琼斯/萨姆·赖利/比尔·帕特森/汤姆·古德曼-希尔/本·克朗普顿/约翰·霍林沃思/露西·拉塞尔/朱利安·费罗/布赖尼·米勒",
					"datePublished": "2020-10-20T16:00:00.000+00:00",
					"description": "一名年轻女佣在酒店邂逅了一位贵族并迅速与其坠入情网，后跟随其来到海边的私人庄园，她渐渐发觉庄园的女管家并不待见她，丈夫身上也仿佛有着不可告人的秘密，她感到庄园中前任女主人丽贝卡的影子无处不在，在她濒临...",
					"ratingCount": "5670",
					"rating": "5.6"
				},
				{
					"id": "10512661",
					"name": "银翼杀手2049",
					"cover": "https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2501864539.jpg",
					"url": "https://movie.douban.com/subject/10512661/",
					"type": "剧情/动作/科幻",
					"director": "丹尼斯·维伦纽瓦",
					"author": "汉普顿·范彻/迈克尔·格林/菲利普·迪克",
					"actor": "瑞恩·高斯林/哈里森·福特/安娜·德·阿玛斯/西尔维娅·侯克斯/罗宾·怀特/杰瑞德·莱托/戴夫·巴蒂斯塔/麦肯兹·戴维斯/卡拉·朱里/爱德华·詹姆斯·奥莫斯/巴克德·阿巴蒂/大卫·达斯马齐连/西娅姆·阿巴斯/连尼·詹姆斯/马克·阿诺德/肖恩·杨",
					"datePublished": "2017-10-05T16:00:00.000+00:00",
					"description": "故事发生在大断电30年后。复制人K（瑞恩·高斯林 Ryan Gosling 饰）是新一代的银翼杀手，在如今的世界里，人类和复制人之间的界限划分的更加明确，复制人从刚一制造出来就被灌输了服务于人类的思想...",
					"ratingCount": "445154",
					"rating": "8.3"
				},
				{
					"id": "10523152",
					"name": "哭泣的男人",
					"cover": "https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2675376450.jpg",
					"url": "https://movie.douban.com/subject/10523152/",
					"type": "剧情/惊悚/西部",
					"director": "克林特·伊斯特伍德",
					"author": "N·理查德·纳什/尼克·申克",
					"actor": "克林特·伊斯特伍德/德怀特·尤科姆/丹尼尔V·格拉劳/安珀·林恩·阿什利/布雷特尼·拉特利奇/亚历山德拉·鲁迪/萨罗·索利斯/霍拉西欧·加西亚·罗哈斯/伊万·埃尔南德斯/费兰达·乌雷霍拉/Lincoln A. Castellanos/Eduardo Minett/Juan Mendoza Solis/娜塔莉娅·特拉文/马尔科·罗德里格斯/保罗·阿拉约/吉安尼·卡尔切蒂",
					"datePublished": "2021-09-16T16:00:00.000+00:00",
					"description": "影片讲述了一名驯马师为了养老金和自己破产的牧场老板达成协议，从老板富有的墨西哥前妻那里绑架老板11岁的儿子以索要赎金。然而老板的前妻正为这个不良少年头疼，巴不得甩掉这个包袱，事情朝着意料之外的方向发展...",
					"ratingCount": "3982",
					"rating": "6.5"
				},
				{
					"id": "10533913",
					"name": "头脑特工队",
					"cover": "https://img9.doubanio.com/view/photo/s_ratio_poster/public/p2266293606.jpg",
					"url": "https://movie.douban.com/subject/10533913/",
					"type": "喜剧/动画/冒险",
					"director": "彼特·道格特/罗纳尔多·德尔·卡门",
					"author": "彼特·道格特/罗纳尔多·德尔·卡门/梅格·勒福夫/乔什·库雷/迈克尔·阿恩特/西蒙·里奇/鲍勃·彼德森/比尔·哈德尔/艾米·波勒",
					"actor": "艾米·波勒/菲利丝·史密斯/理查德·坎德/比尔·哈德尔/刘易斯·布莱克/敏迪·卡灵/凯特林·迪亚斯/戴安·琳恩/凯尔·麦克拉克伦/波拉·庞德斯通/鲍比·莫尼汉/保拉·佩尔/大卫·戈尔兹/弗兰克·奥兹/乔什·库雷/弗利/约翰·拉岑贝格/卡洛斯·阿拉斯拉奇/皮特·萨加尔/拉什达·琼斯/罗里·艾伦/约翰·齐甘/雪莉·琳恩/拉瑞恩·纽曼/帕丽斯·冯·戴克",
					"datePublished": "2015-06-18T16:00:00.000+00:00",
					"description": "可爱的小女孩莱莉（凯特林·迪亚斯 Kaitlyn Dias 配音）出生在明尼苏达州一个平凡的家庭中，从小她在父母的呵护下长大，脑海中保存着无数美好甜蜜的回忆。当然这些记忆还与几个莱莉未曾谋面的伙伴息息...",
					"ratingCount": "551250",
					"rating": "8.8"
				},
				{
					"id": "10535568",
					"name": "阿黛尔的生活",
					"cover": "https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2162563238.jpg",
					"url": "https://movie.douban.com/subject/10535568/",
					"type": "剧情/爱情/同性",
					"director": "阿布戴·柯西胥",
					"author": "阿布戴·柯西胥/茱莉·马罗/加利亚·拉克鲁瓦",
					"actor": "阿黛尔·艾克萨勒霍布洛斯/蕾雅·赛杜/萨利姆·克希乌什/热雷米·拉厄尔特/卡特琳·萨雷/奥雷利安·雷克因/莫娜·瓦尔拉芬斯/阿尔玛·佐杜洛夫斯基/安娜·卢瓦雷/本杰明·思科索/桑德尔·丰泰克",
					"datePublished": "2013-05-22T16:00:00.000+00:00",
					"description": "故事主角是15岁女孩阿黛尔（阿黛尔·艾克萨勒霍布洛斯 Adèle Exarchopoulos 饰），她有一个帅气的同学男友托马斯（热雷米·拉厄尔特 Jeremie Laheurte 饰），但托马斯并没...",
					"ratingCount": "231193",
					"rating": "8.4"
				},
				{
					"id": "10537853",
					"name": "万箭穿心",
					"cover": "https://img1.doubanio.com/view/photo/s_ratio_poster/public/p1759644668.jpg",
					"url": "https://movie.douban.com/subject/10537853/",
					"type": "剧情/家庭",
					"director": "王竞",
					"author": "吴楠",
					"actor": "颜丙燕/陈刚/焦刚/李现/赵倩/王沫溪/杨鸣秋/何明兰/刘善良/黄首霞",
					"datePublished": "2012-11-15T16:00:00.000+00:00",
					"description": "90年代的武汉，一个普通家庭里丈夫马学武（焦刚 饰）是一家国企的厂办主任，妻子李宝莉（颜丙燕 饰）是汉正街的一名小贩，二人还有一个儿子小宝（李现 饰）。一次企业分房让这个家庭住进了新房，岂料从搬家那天...",
					"ratingCount": "212834",
					"rating": "8.6"
				},
				{
					"id": "10571509",
					"name": "如父如子",
					"cover": "https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2154079590.jpg",
					"url": "https://movie.douban.com/subject/10571509/",
					"type": "剧情/家庭",
					"director": "是枝裕和",
					"author": "是枝裕和",
					"actor": "福山雅治/尾野真千子/真木阳子/中川雅也/风吹淳/国村隼/树木希林/夏八木勋/井浦新/二宫庆多",
					"datePublished": "2013-09-27T16:00:00.000+00:00",
					"description": "普通上班族野野宫良多（福山雅治 饰）和妻子野野宫绿（尾野真千子 饰）结婚多年，感情十分要好，两人共同养育着聪明乖巧的儿子野野宫庆多（二宫庆多 饰），生活宁静中处处透露着幸福。令本以为平静生活将一直持续...",
					"ratingCount": "137461",
					"rating": "8.7"
				}
			]

			// var app = new Vue({
			// 	el: "#app",
			// 	data: {
			// 		message: "hello Vue!"
			// 	}
			// });

			var movie = new Vue({
				el: "#example",
				data: {
					movies: movies
				},
				methods: {
					update(data) {
						this.movies = data
						var t = this.movies.pop()
						this.movies.push(t)
					}
				},
				created() {
					window.update = this.update
				}
			})

			// 请求参数
			$.ajax({
				url: "http://localhost:8888/movies",
				contentType: "application/x-www-form-urlencoded",
				type: "get",
				dataType: 'json',
				success: function(data) {
					console.log(data)

					update(data)
				},
				error: function() {}
			});

			function onClick(e) {
				var url = "http://localhost:8888/movies"
				var id_name = e.getAttribute("id-name").toString()
				if (id_name != null) {
					url = url + "/" + id_name
				}

				$.ajax({
					url: url,
					contentType: "application/x-www-form-urlencoded",
					type: "get",
					dataType: 'json',
					success: function(data) {
						console.log(data)
						update(data)
					},
					error: function() {}
				});
			}
		</script>

	</body>
</html>
